<template>
  <div id="shop-item">
    <div class="item-selector">
      <checkButton @click.native="checkedChange" :isChecked="check" ></CheckButton>
    </div>
    <div class="item-img">
      <img :src="itemInfo.img" alt="商品图片"></div>
    <div class="item-info">
      <div class="item-title">{{itemInfo.name}}</div>
      <div class="item-desc">{{itemInfo.desc}}</div>
        <div class="info-bottom">
          <div class="item-price left">${{itemInfo.price}}</div>
          <div class="item-count right">x{{itemInfo.count}}</div>
        </div>
    </div>
    <div @click="deleteGood"><slot name="button"></slot></div>
  </div>
</template>

<script>
  import checkButton from 'components/common/checkButton/button.vue'
  import {carDelData,carGetData} from 'network/car/emit.js'
  export default{
    name:'',
    data(){
      return {
        check:false
       }
    },
    computed:{
      // check:{
        // get(){
        //   console.log("get",this.itemInfo.pay);
        //   return this.itemInfo.pay
        // },
        // set(val){
        //   console.log("val",val);
        //   return val
        // }
      // }
    },
    methods:{
      checkedChange(){
        this.itemInfo.pay=!this.itemInfo.pay
        this.check=this.itemInfo.pay
        console.log("??",this.check,this.itemInfo.pay);
        // console.log("item",this.getGoodsPrice());
        this.$bus.$emit("sendPrice",this.getGoodsPrice().toFixed(2))
        // this.$store.commit('setGoodPayReverse',this.itemInfo)
      },
      getGoodsPrice(){
        let state=this.$store.state
        return state.goodsList.filter(item=>{
          return item.pay
        }).reduce((pre,item)=>{
          console.log(item);
          return item.count*item.price+pre
        },0)
      },
      deleteGood(){
        let userId=JSON.parse(window.sessionStorage.user).id
        let goodId=this.itemInfo.goodId||this.itemInfo.id
        let info=[userId,goodId]
        this.$emit('deleteGood',info)
        carDelData(userId,goodId).then(res=>{
          console.log(res);
          if(res.data.result=="yes"){
            carGetData(userId).then(res=>{
              console.log('del',res);
              this.$router.go(0)
            }).catch(e=>{
              console.log(e);
            })
          }
        }).catch(e=>{
          console.log(e);
        })
      }
    },
    components:{
      checkButton
    },
    props:{
      itemInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .button{
    background-color: #fe777a;
    color: white;
    font-size: 20px;
    border-radius: 10%;
    height: 35px;
    width: 70px;
    position: absolute;
    top: 85px;
    right: 20px;
    box-shadow: 0px 0px 1px 0px rgba(135, 135, 135, 0.4);
  }

  #shop-item {
    width: 100%;
    display: flex;
    font-size: 0;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    position: relative;
  }

  .item-selector {
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-title, .item-desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-img {
    padding: 5px;
  /*border:1px solid #ccc; */
  }
  .item-img img {
    width: 80px;
    height: 10opx;
    display: block;
    border-radius: 5px;
  }

  .item-info {
    font-size: 17px;
    color:#333;
    padding: 5px 10px;
    position: relative;
    overflow: hidden;
  }
  .item-info .item-desc {
    font-size: 14px;
    color:#666;
    margin-top: 15px;
  }
  .info-bottom {
    margin-top: 10px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
  .info-bottom .item-price {
    color: orangered;
  }
</style>
